<template>
  <el-row :gutter="20">
    <el-col :span="14" :xs="24">
      <!-- 列表 -->
      <ContentWrap class="mt-10px">
        <el-table v-loading="loading" :data="list" :show-overflow-tooltip="true" :stripe="true">
          <el-table-column label="序号" type="index" width="60px" />
          <el-table-column label="危险源示意图">
            <template #default="{ row, $index }">
              <el-form-item :prop="`${$index}.danger_urls`" class="mb-0px!">
                <UploadFile v-model="row.danger_urls" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="消防示意图">
            <template #default="{ row, $index }">
              <el-form-item :prop="`${$index}.fire_protection_urls`" class="mb-0px!">
                <UploadFile v-model="row.fire_protection_urls" />
              </el-form-item>
            </template>
          </el-table-column>
        </el-table>
      </ContentWrap>
    </el-col>
  </el-row>

</template>
<script lang="ts" setup>
import { TechDefenseApi, TechDefenseVO } from '@/api/crm/tech_defense'

defineOptions({ name: 'DangerManageList' })
const { techdefense } = defineProps<{
  techdefense: TechDefenseVO
}>()

const loading = ref(true) // 列表的加载中
const list = ref([]) // 列表的数据

/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
  () => techdefense.id,
  async (val) => {
    if (!val) {
      loading.value = false
      return;
    }
    try {
      loading.value = true
      list.value = await TechDefenseApi.getTechDefenseMapListByDefenseId(val)
    } finally {
      loading.value = false
    }
  },
  { immediate: true }
)

</script>
